<template>
	<view>
		<view style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;" @click="ToReward">
			<view class="address">
				<image src="@/static/images/dashang.png" mode="aspectFill" style="width: 56rpx;height: 56rpx;">
				</image>
			</view>
			<view class="title">打赏</view>
		</view>
		<!-- 打赏 -->
		<uv-popup :round="20" ref="rewardRef" mode="bottom" :closeOnClickOverlay="false">
			<view class="register-popup">
				<view class="register-title">
					<view class="title">
						打赏
					</view>
					<view class="del-btn" @click="rewardRef.close()">
						<image src="@/static/images/closelist.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="register-statistics">
					<view class="register-num">
						打赏金额
					</view>
				</view>
				<view class="money-select-item">
					<view class="select-item" :class="[item.id==currentIndex ? 'active':'']" v-for="(item,index) in priceList" :key="item.id" @click="change(item.id)">
						<image class="money-img" src="@/static/images/money.png" mode="widthFix"></image>
						<view class="price">
							{{item.name}}星光
						</view>
					</view>
				</view>
				<view class="diy-price">
					<view class="image-icon">
						<image src="@/static/images/money.png" mode="widthFix"></image>
						<input class="input" type="number" placeholder="自定义金额" @input="amountInput" v-model="amount" />
					</view>
				</view>
				<view class="pay-account">
					<view class="account-title">
						支付账户
					</view>
					<view class="account-price">
						<image src="@/static/images/money.png" mode="widthFix"></image>
						<text class="account">通用账户</text>
						<text class="price">{{totalmoney}}星光</text>
					</view>
				</view>
				<view class="reward-btn" @click="reward">
					打赏
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import { useUserStore } from "@/store/modules/user.js"
	import { useActiveStore } from "@/store/modules/active.js"
	import { throttle } from '@/utils/utils';
	import { messageTippingAPI } from '@/api/active.js'
	const userStore = useUserStore()
	const activeStore = useActiveStore()
	const priceList = ref([])
	const amount = ref('')
	const totalmoney = ref(0)
	const currentIndex = ref(0)
	const rewardRef = ref()
	const props = defineProps(['userId'])
	console.log(props, '=========')
	// 获取打赏金额
	const tippingMoney = async () => {
		let res = await userStore.getConFig({
			type: 'tippingTemplate'
		})
		if (res.code == 200) {
			priceList.value = res.data.content
			rewardRef.value.open()
		}
	}
	// 点击打赏
	const ToReward = () => {
		currentIndex.value = 1
		amount.value = ''
		tippingMoney()
		totalMoney()
	}
	// 自定义输入打赏金额
	const amountInput = (e) => {
		amount.value = e.detail.value
		if (e.detail.value != '') {
			currentIndex.value = 0
		}
	}
	// 获取星光币
	const totalMoney = async () => {
		let res = await userStore.getMoneyAmount()
		totalmoney.value = res
	}
	const change = (index) => {
		currentIndex.value = index
	}
	// 确认打赏
	const reward = throttle(async () => {
		let params = {
			user_id: props.userId,
			amount: amount.value || '1',
			template_id: currentIndex.value
		}
		let res = await messageTippingAPI(params)
		if (res.code == 200) {
			rewardRef.value.close()
			uni.$uv.toast('打赏成功')
			// rechargeRef.value.open()
		}
	}, 200)
</script>

<style lang="scss" scoped>
	.register-popup {
		padding: 40rpx 30rpx 40rpx 30rpx;

		.register-title {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				flex: 1;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				text-align: center;
			}

			.del-btn {

				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 打赏
		.money-select-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-wrap: wrap;

			.select-item {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				width: 206rpx;
				height: 100rpx;
				background: #F6F6F6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

				.money-img {
					width: 32rpx;
					height: 32rpx;
				}

				.price {
					font-weight: 400;
					font-size: 28rpx;
				}

				&.active {
					background: #FFF1F3;
					color: #FE3052;
					border: 2rpx solid #FE3052;
				}
			}
		}

		.diy-price {
			padding: 60rpx 0;

			.image-icon {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F6F6F6;
				padding: 18rpx 0;

				image {
					width: 44rpx;
					height: 44rpx;
				}

				.input {
					padding-left: 20rpx;
				}
			}
		}

		.pay-account {

			.account-title {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}

			.account-price {
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				width: 670rpx;
				height: 108rpx;
				background: #F6F6F6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				image {
					margin-left: 30rpx;
					width: 44rpx;
					height: 44rpx;
				}

				.account {
					padding: 0 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

				.price {
					font-weight: 400;
					font-size: 28rpx;
					color: #FE3052;
				}
			}
		}

		.reward-btn {
			margin: auto;
			margin-top: 60rpx;
			width: 670rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #FE3052;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>